import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { List, Icon } from 'antd-mobile';
import styles from './myEducation.css';
import CustBtn from '../../../../../../../common/buttons/Btn';
import date from '../../../../../../../framework/utils/date';
import CustomsItemNoArrow from '../CustomsItemNoArrow/CustomsItemNoArrow';
import Line from '../../../../../../../common/borderLine/Line';

const addImg = require('../../../../../../../icons/add-6CA0F7.png');
const pointIcon = require('../../../../../../../icons/personal/myReume/point-icon.png');
const editIcon = require('../../../../../../../icons/personal/myReume/edit-icon.png');

const MyEducation = ({
  resumeModel={},
  textName,
  onOk=()=>{},
  onAdd=()=>{},
  onViewDetail=()=>{},
}) => {

  const CustomsItemNoIconProps = {
    label: textName,
    text: '添加',
    onOk,
  }

  const showMyEducationList =(resumeModel) =>{

      const list = resumeModel.eduBackgrounds;

      if(list && list.length > 0){
        return list.map((item, index) => {
          return(
            <div key={index.toString()}
              className={styles.workExperienceItem}>
              <div className={styles.itemIcon}>
                <img src={pointIcon}/>
                <div className={styles.verticalLine}></div>
              </div>
              <div className={styles.itemContent}>
                <span className={styles.itemTitleName}>
                  {convertDate(item.entranceTime, item.graduationTime)}
                </span>
                <span className={styles.companyName}>{item.collegeName}</span>
                <span className={styles.jobName}>{`${item.education} | ${item.major}`}</span>
              </div>
              <div className={styles.editIcon}
                onClick={()=> onViewDetail(item)}>
                <img src={editIcon}/>
              </div>
            </div>
          )
        })
      }else{
        return (
          <div className={styles.addView} onClick={onAdd}>
            <img src={addImg} />
            <span>添加教育经历</span>
          </div>
        )
      }
    }

  //时间转换
  const convertDate = (firstTime, secondTime) => {
    const newFirstTime = date.yearAndMonthAndDay(firstTime);
    const newSecondTime = date.yearAndMonthAndDay(secondTime);
    return `${newFirstTime} ~ ${newSecondTime}`;
  }

  return (
    <div className={styles.container}>

      <CustomsItemNoArrow {...CustomsItemNoIconProps} />
      <Line/>
      <div className={styles.content}>
        <div className={styles.stepsContent}>
          {showMyEducationList(resumeModel)}
        </div>
      </div>

    </div>
  )
}


MyEducation.propTypes = {
};

export default createForm()(MyEducation);
